<template>
    <div class="table">
        <div class="container">
            <div class="handle-box" style="text-align: right">
                <!--<el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>-->
                <!--<el-select v-model="projectClassId" placeholder="选择分类">-->
                <!--<el-option v-for="v in classList" :label="v.traffic_report_type" :value="v.id" :key="v.id"></el-option>-->
                <!--</el-select>-->
                <!--<el-date-picker-->
                <!--v-model="dateTime"-->
                <!--type="daterange"-->
                <!--value-format="yyyy-MM-dd"-->
                <!--range-separator="至"-->
                <!--start-placeholder="开始日期"-->
                <!--end-placeholder="结束日期">-->
                <!--</el-date-picker>-->
                <!--<el-button type="primary" icon="search" @click="search">搜索</el-button>-->
                <el-button type="primary" @click="add" style="">添加产品分类</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable">
                <el-table-column prop="type_name" label="分类名称"></el-table-column>
                <el-table-column label="操作" width="210" align="center" fixed="right">
                    <template slot-scope="scope">
                        <div>
                            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页插件-->
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="totalRow">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="添加/编辑" :visible.sync="editVisible" width="50%">
            <!--<demoAdd :uid="roleId" ref="roleAdd" @done="demoDone"></demoAdd>-->
            <el-form label-width="100px"
                     class="demo-ruleForm">
                <el-form-item label="分类名称">
                    <el-input type="text" v-model="type_name" auto-complete="off"></el-input>
                </el-form-item>
                <br>
                <el-form-item>
                    <el-button type="primary" @click="submit">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import pub from '../../utils/pub'
    export default {
        components:{
        },
        name: 'product-class',
        data() {
            return {
                tableData: [],
                pageSize: 0,
                totalRow: 0,
                currentPage: 1,

                editVisible: false,

                roleId: '',

                type_name: '',
            }
        },
        methods: {
            loadopen() {
                this.loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.2)'});
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {this.loading.close();},
            // 改变pageSize
            handleSizeChange(){},
            // 分页导航
            handleCurrentChange(val){this.getData(val);},
            // 获取列表数据
            getData(pageNumber) {
                this.loadopen();
                this.config.post('/admin/producttype/findPage', {
                    pageNum: pageNumber?pageNumber:1,
                }).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.tableData = res.data.page.list;
                        this.pageSize = res.data.page.pageSize;
                        this.totalRow = res.data.page.totalRow;
                        this.pageNumber = res.data.page.pageNumber;
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            search() { this.getData() },
            // 获取上传文件控件返回的地址
            upFile(){
                let self = this;
                let el = document.createElement('input')
                el.type = 'file';el.accept="image/*"
                el.onchange = (e)=>{
                    self.img_url = '';
                    self.loadopen()
                    pub.ossupFile(e.target, (res)=>{
                        self.loadclose()
                        // console.log(res, '哈哈，我拿到了')
                        self.img_url = res;
                    })
                };
                el.click();
            },
            // 添加
            add(){
                this.editVisible = true;
                this.roleId = '';
            },
            // 编辑
            handleEdit(index, row) {
                this.editVisible = true;
                this.roleId = row.id;
                this.type_name = row.type_name;
                this.img_url = row.img_url;
            },
            // 编辑提交
            submit(){
                let obj = {
                    'p.id': this.roleId,
                    'p.type_name': this.type_name,
                };
                // console.log(obj);
                let url = this.roleId ? '/admin/producttype/update' : '/admin/producttype/add';
                this.loadopen();
                this.config.post(url, obj).then(res => {
                    this.loadclose();
                    if (res.data.code === '0') {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        this.editVisible = false;
                        this.getData()
                    } else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                });
            },
            // 删除
            handleDelete(index, row) {
                this.$confirm('确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loadopen();
                    this.config.post('/admin/producttype/delete', {id: row.id}).then(res=>{
                        this.loadclose();
                        if(res.data.code==='0'){
                            this.$message.success(res.data.message);
                            this.getData();
                        }else {
                            this.$message.error(this.config.handleError(res.data));
                        }
                    });
                })
            },
            // 操作完成，隐藏弹框，刷新视图
            demoDone(str) {
                this.editVisible = false;
                this.getData();
            },
        },
        mounted(){
            this.getData(1);
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
</style>
